<template>
	<view class="page-box" style="height:100%">
		
		<view class="bgimg-box">
			<view class="feed" @click="goToFeed">
				<image class="wh1s" src="../../static/xinz/feedimg.png" mode="widthFix"></image>
				<view class="">
					意见反馈
				</view>
			</view>
			
			<image class="wh100" :src="`${staticUrl}big_bgimg.png`" mode="widthFix"></image>

			<!-- 信息区 -->
			<view class="ava-box">
				<view class="ava-img">
					<image class="wh100" :src="ava.img" mode=""></image>
				</view>
				<text>{{ava.name}}</text>
			</view>

			<view class="youhui-box">
				<view class="title">
					<view class="left">
						<!-- <image src="/static/mine/yuan.png"></image> -->
						<image src="/static/sy1.png" mode="widthFix"></image>
						<text>我的优惠券</text>
					</view>
					<image class="right" src="/static/mine/more.png" @click="toMore"></image>
				</view>

				<view class="list-box">
					<template v-if="list.length>0">
						<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
							<image class="wh100" src="/static/mine/border01.png"></image>
							<view class="left">
								<view class="top">
									<text>￥</text>
									<view>{{item.price}}</view>
								</view>
								<text>{{item.text1}}</text>
							</view>
							<view class="right">
								<view class="s-left">
									<text>{{item.title}}</text>
									<view>{{item.time}}</view>
								</view>
								<view class="s-right" v-if="item.type==0"  @click="hideMask">去使用</view>
								<view class="s-right1" v-if="item.type==1">
									<image class="wh100" src="/static/mine/dui.png"></image>
								</view>
								<view class="s-right1" v-if="item.type==2">
									<image class="wh100" src="/static/mine/shi.png"></image>
								</view>
							</view>
						</view>

						<view class="no-box" v-if="isMore">无更多数据了...</view>
					</template>
					<template v-else>
						<uni-empty tips="'暂无数据...'"></uni-empty>
					</template>
					
					  <view @click="heixaoa">临时加的查看核销</view>
				</view>
			</view>
		</view>
          
		<!-- 弹框 -->
		<uni-popup ref="popup" background-color="transparent">
			<view class="popup-content">
				<image :src="`${staticUrl}index/bg01.png`"></image>
				
				<view class="title">
					<view>天生桥景区优惠券</view>
					<text>（有效期至2024.12.12）</text>
				</view>
				<view class="price">
					<view class="num">
						90
						<text>元</text>
					</view>
					<text class="tip">满100元可用</text>
				</view>
				<view class="bottom">
					<view class="daka-btn" @click="hideMaska">
						<text>立即使用</text>
					</view>
					<text class="ok"  @click="hideMask">好的，知道了</text>
				</view>
			</view>
		</uni-popup>

		<Tabbar :current="'2'"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			Tabbar,
		},

		data() {
			return {
				staticUrl:this.$base.staticUrl,
				ava: {
					img: '/static/ditu.png',
					name: '扬布拉德'
				},

				isMore: true,
				list: [{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 0
					},
					{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 1
					},
					{
						price: 30,
						text1: '满100减30元',
						title: '天生桥景区优惠券',
						time: '有效期至2024.12.12',
						type: 2
					}
				],
			}
		},

		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},

		methods: {
			goToFeed(){
				uni.navigateTo({
					url:"/pages/feedbook/feedbook"
				})
			},
			heixaoa(){
				uni.navigateTo({
					url:'/pages/shangjia/shopList'
				})
			},
			heixao(){
				uni.navigateTo({
					url:'/pages/shangjia/hexiao'
				})
			},
			toMore() {
				uni.navigateTo({
					url: '/pages/my/moreYouHui'
				})
			},

			showMask() {
				this.$refs.popup.open('center')
			},
			hideMask(){
				this.$refs.popup.close()
			},
			hideMaska(){
				uni.navigateTo({
					url:'./huiDetail?id='
				})
			},
			
			toDetail(item){
				// if(item.type == 0){
					uni.navigateTo({
						url:'./huiDetail?id='+item.id+'&type='+item.type
					})
				// }else{
				// 	uni.showToast({
				// 		title: '不能使用',
				// 		icon: 'none'
				// 	})
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.bgimg-box {
		width: 100%;
		height: 100%;
		position: relative;
		
		.feed{
			position: absolute;
			top: 80rpx;
			left: 20rpx;
			width: 180rpx;
			height: 76rpx;
			z-index: 9;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			line-height: 76rpx;
		}
		.wh1s{
		
			width: 76rpx;
			height: 76rpx;
			
		}
		.ava-box {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 200rpx;
			left: 0;

			.ava-img {
				width: 176rpx;
				height: 176rpx;
				border: 3px solid #FFDD57;
				border-radius: 50%;
				margin-bottom: 16rpx;
				overflow: hidden;
				.wh100{
					border-radius: 50%;
					overflow: hidden;
				}
			}

			text {
				font-family: myfont01;
				font-weight: bold;
				font-size: 48rpx;
			}
		}

		.youhui-box {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: absolute;
			top: 500rpx;
			left: 0;
			margin-top: 34rpx;

			.title {
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #002A3A;
					line-height: 52rpx;

					image {
						width: 36rpx;
						margin-right: 16rpx;
					}
				}

				.right {
					width: 116rpx;
					height: 48rpx;
				}
			}

			.list-box {
				width: 100%;
				margin-top: 20rpx;

				.item-box {
					width: 100%;
					height: 160rpx;
					position: relative;
					display: flex;
					margin-bottom: 30rpx;

					image {
						position: absolute;
						left: 0;
						top: 0
					}

					.left {
						width: 160rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						position: relative;
						padding: 20rpx 0;
						box-sizing: border-box;
						font-weight: bold;

						.top {
							display: flex;
							align-items: flex-end;

							text {
								font-size: 36rpx;
								margin-bottom: 2rpx;
							}

							view {
								font-size: 52rpx;
							}
						}

						text {
							font-size: 23rpx;
						}
					}

					.right {
						flex: 1;
						height: 100%;
						position: relative;
						padding: 20rpx 30rpx 20rpx 46rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.s-left {
							width: 300rpx;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;

							text {
								font-size: 35rpx;
								font-weight: bold;
								color: #002A3A;
								line-height: 56rpx;
							}

							view {
								font-size: 28rpx;
								font-weight: bold;
								color: #3A525E
							}
						}

						.s-right {
							width: 132rpx;
							height: 56rpx;
							background: #FFDD57;
							border-radius: 48rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							font-size: 28rpx;
							font-weight: bold;
							color: #884FFF;
						}

						.s-right1 {
							width: 124rpx;
							height: 108rpx;
							position: absolute;
							right: 5rpx;
							top: 5rpx;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
	
	.popup-content {
		width: 558rpx;
		height: 802rpx;
		position: relative;
	
		image {
			width: 100%;
			height:100%;
		}
		
		.title {
			width: 100%;
			height:130rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 550rpx;
			left: 0;
			font-size: 26rpx;
			color: #3A525E;
			view{
				font-size: 36rpx;
				font-weight: bold;
				color: #002A3A;
				line-height: 60rpx;
			}
		}
		.price {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 290rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.num {
				width: 154rpx;
				font-weight: bold;
				font-size: 128rpx;
				font-family: AaHouDiHei;
				position: relative;
				color: #FD4A5C;
				text {
					display: inline-block;
					width: 64rpx;
					height: 64rpx;
					background: #FFF5CE;
					text-align: center;
					line-height: 64rpx;
					position: absolute;
					right: -20rpx;
					bottom: 20rpx;
					
					font-size: 30rpx;
					color: #FD4A5C;
					text-shadow: 0px 0px 0px #FFDD57;
					border-radius: 50%;
				}
			}
			.tip{
				font-size: 30rpx;
				font-weight: bold;
				color: #3A525E;
			}
		}
		.bottom {
			width: 100%;
			height:250rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.daka-btn {
				width: 494rpx;
				height: 96rpx;
				background: #FFDD57;
				border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
				font-size: 36rpx;
				font-weight: bold;
				color: #884FFF;
			
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			.ok{
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top:36rpx
			}
		}
	}
</style>